<template>
  <div class="page-square tl">
    <img :src="TlImage" alt="" />
  </div>
  <div class="page-square tr">
    <img :src="TrImage" alt="" />
  </div>
  <div class="page-square bl">
    <img :src="BlImage" alt="" />
  </div>
  <div class="page-square br">
    <img :src="BrImage" alt="" />
  </div>
</template>

<script lang="ts" setup>
  import TlImage from '@/assets/images/page-square/tl.png'
  import TrImage from '@/assets/images/page-square/tr.png'
  import BlImage from '@/assets/images/page-square/bl.png'
  import BrImage from '@/assets/images/page-square/br.png'
</script>

<style lang="scss" scoped>
  .page-square {
    position: absolute;
    z-index: 100;
    img {
      width: 60px;
      height: 60px;
    }
    &.tl {
      top: 30px;
      left: 16px;
    }
    &.tr {
      top: 30px;
      right: 16px;
    }
    &.bl {
      bottom: 48px;
      left: 16px;
    }
    &.br {
      bottom: 48px;
      right: 16px;
    }
  }
</style>
